<template>
	<view class="recommend">
		<template v-for="item in recommend" :key="item">
			<view class="recommend-item" @click="recommendItemClick(item)">
				<image class="image" :src="item.image" mode="widthFix"></image>
				<view class="text">
					{{ item.title }}
				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
	const props = defineProps({
		recommend: {
			type: Array,
			default: () => []
		}
	})
	
	// 注册了点击事件，但没有在父组件中使用
	const emits = defineEmits(["recommendItemClick"])
	function recommendItemClick(item){
		emits('recommendItemClick', item)
	}
</script>

<style lang="scss">
	.recommend {
		display: flex;
		justify-content: space-around;
		margin-top: 15rpx;
		.recommend-item {
			// 混入的引入
			@include normalFlex();
			font-size: $gFontSize;
			image {
				width: 140rpx;
				height: 140rpx;
			}
			.text {
				margin-top: 10rpx;
				// text-align: center;
			}
		}
	}
</style>